<template>
  <div>
    <div class="gl_contentBox" style="margin-bottom:20px">
      <div class="navTop">
        <div class="right">
          <p style="font-size:20px;margin-bottom:14px"> 班级: {{ role.name }}</p>
          <p style="font-size:20px;margin-bottom:14px;font-size:14px"> 课程:
            <el-tag style="margin-right:15px;margin-bottom:10px">
              {{ courseName }}
            </el-tag>
          </p>
        </div>
      </div>
    </div>
    <div class="gl_contentBox">
      <el-tabs v-model="activeTab" class="gl_tabs" type="card" @tab-click="tabClick">
        <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
          <component :is="item.component" v-if="activeTab === item.name" :active-tab="activeTab" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { api_GET_ClubClassId } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubClassIdQO } from '@/lib/form/hall/swaggerForm';
import sigin from './clickSigin.vue';
import sigout from './clickSigout.vue';
export default {
  data() {
    return {
      Api_GET_ClubClassIdQO: new Api_GET_ClubClassIdQO(),
      role: {},
      activeTab: this.$route.query.sinname || 'sigin',
      courseName: '',
      storeId: '',
      tabList: [
        {
          label: '签到',
          name: 'sigin',
          productStatus: 'sigin',
          component: sigin
        },
        {
          label: '签退',
          name: 'sigout',
          productStatus: 'sigout',
          component: sigout
        }
      ]
    };
  },
  created() {
    this.courseName = this.$route.query.courseName;
    this.Api_GET_ClubClassIdQO.IncludeClassStudentCount = true;
    this.Api_GET_ClubClassIdQO.IncludeCourse = true;
    api_GET_ClubClassId(this.$route.query.id, this.Api_GET_ClubClassIdQO).then(res => {
      console.log(res);
      this.role = res;
    }, error => {
      const _msg = error.error.message || error.message;
      this.$message({ type: 'error', message: _msg });
    });
  },
  methods: {
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    tabClick(val) {
      console.log(val);
    }
  }

};
</script>

<style  lang="scss" scoped>
.navTop {
  display: flex;
  align-items: center;
}
.photo {
  width: 72px;
  height: 32px;
  border-radius: 50%;
  margin-right: 24px;
}
</style>
